<style lang="scss" scoped>
  @import '../assets/css/mixin.scss';
  .register {
    padding-top: 47vw;
    height: 100vh;
    @include bag('https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3274997149,3206423708&fm=26&gp=0.jpg')
  }
</style>

<template lang="pug">
  .register
    mu-form.container(ref="form" :model="formData" color="#fff")
      mu-form-item.text_l(label="用户名" prop="username" :rules="userNameRules")
        mu-text-field(v-model="formData.username" prop="username" placeholder="用户名长度3至10")
      mu-form-item.text_l(label="密码" prop="password" :rules="passwordRules")
        mu-text-field(type="password" v-model="formData.password" prop="password" placeholder="密码长度6至24")
      mu-form-item(prop="argee" :rules="argeeRules")
        mu-checkbox(label="同意用户协议" v-model="formData.argee")
      mu-button(color="primary" v-noClick="{ fn: submit}" style="width:100%") 注册
    div.container_rl.text_r
      router-link.blue(to="/login") 返回登录
</template>

<script>
  import {mapState, mapGetters, mapMutations} from 'vuex'
  import common from '@/utils/common';
  import login_mixin from '@/utils/mixin/login'
  export default {
    name: "register",
    mixins: [login_mixin],
    data() {
      return {
        formData: {
          argee: false,
        },
        argeeRules: [{ validate: (val) => !!val, message: '必须同意用户协议'}],
      }
    },
    computed: {
      ...mapState([]),
      ...mapGetters([]),
    },
    methods: {
      ...mapMutations([]),
      submit() {
        this.$refs.form.validate().then(result => {
          if(result) this.fnAjax('/user/register', '/login')
        })
      }
    },
    created() {

    },
    mounted() {

    }
  }
</script>

